<template>
  <div class="profile ovh">
    <zhHeader :leftRouter="{name: 'user'}" title="个人信息">
      <span slot="left">返回</span>
    </zhHeader>
    <section class="list bs bcwh">
      <div class="list-item">
        <div class="des">昵称</div>
        <router-link to="" tag="div" class="value">
          妮可
          <i class="icon icon-fa-angle-right"></i>
        </router-link>
      </div>
      <div class="list-item">
        <div class="des">性别</div>
        <div class="value">
          女
          <i class="icon icon-fa-angle-right"></i>
        </div>
      </div>
      <div class="list-item">
        <div class="des">手机</div>
        <router-link to="" tag="div" class="value">
          10086
          <i class="icon icon-fa-angle-right"></i>
        </router-link>
      </div>
      <div class="list-item">
        <div class="des">邮箱</div>
        <router-link to="" tag="div" class="value">
          niko@lovelive.com
          <i class="icon icon-fa-angle-right"></i>
        </router-link>
      </div>
      <div class="list-item">
        <div class="des">城市</div>
        <div class="value">
          东京
          <i class="icon icon-fa-angle-right"></i>
        </div>
      </div>
    </section>
    <section class="action mt10r mb10r tc">
      <div class="button">
        <mt-button type="danger" size="small" class="whalf">退出登录</mt-button>
      </div>
    </section>
  </div>
</template>

<script>
  import zhHeader from '@/components/Header'

  export default {
    components: {
      zhHeader
    }
  }
</script>

<style lang="stylus">
.profile 
  .list .list-item
    align-items: center
    height: 1.8rem
    min-height: 45px
    padding-bottom: .24rem
    padding-left: .4rem
    font-size: .48rem
    &:not(:last-child)
      border-bottom: 1px solid #eee
    .des
      padding: 6px 0
      color: #666
    .value .icon
        float: right
        margin-right: .4rem
</style>
